<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

<table class="table">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP基本表格</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>

<table class="table table-striped">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP带斑马线的表格</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>
<table class="table table-bordered">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 带边框的表格</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>




<table class="table table-hover">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 有鼠标悬停状态的表格</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>


<table class="table table-condensed">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 更加紧凑的表格</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>
<table class="table table-striped table-bordered table-hover  table-condensed">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 多种表格效果整合在一起</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>
<table class="table 激活样式">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 多种表格效果整合在一起</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>

<table class="table ">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 激活样式</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr class="active">
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>




<table class="table ">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 成功样式</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr class="success">
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>


<table class="table ">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 信息样式</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr class="info">
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>
<table class="table ">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 警告样式</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr class="warning">
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>




<table class="table ">
  <thead>
     <th>头像</th>
     <th>名字</th>
     <th>HP 危险样式</th>
  </thead>
  <tbody>
     <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td>
        <td>盖伦</td>
        <td>616</td>
     </tr>
 <tr>
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td>
        <td>提莫</td>
        <td>383</td>
     </tr>
 <tr class="danger">
        <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td>
        <td>阿卡丽</td>
        <td>448</td>
     </tr>
  </tbody>
</table>



</body>
</html>